<template>
    <div class="county-agent-wrapper">
        <div v-if="active == '区县代理'" class="flex-a-c flex-j-sb employee-box"
            @click="link('finger_shopping_staff', 'add')">
            <div class="flex-a-c">
                <div class="tianjia-icon">
                    <i class="iconfont icon-tianjiayuangong1"></i>
                </div>
                <span class="f-14">添加员工</span>
            </div>
            <i class="iconfont icon-icon_more11 c-999"></i>
        </div>
        <van-tabs v-model="active1" line-width=".9375rem" line-height=".125rem" @click="tabs_handle">
            <van-tab v-if="active == '区县代理'" title="招商员列表"></van-tab>
            <van-tab v-else title="区县代理列表"></van-tab>
            <van-tab title="商家列表"></van-tab>
            <van-tab title="收益列表"></van-tab>
        </van-tabs>
        <div v-if="active1 == 0">
            <template v-if="active == '区县代理'">
                <div class="account-manager" v-for="(item, index) in list" :key="index"
                    @click="link('finger_shopping_merchants_details', item)">
                    <img v-if="item.has_one_member" :src="item.has_one_member.avatar_image" />
                    <div class="account-manager-right">
                        <div style="flex:1;      margin-right: .9063rem;">
                            <div class="flex-j-sb flex-a-c lh-1" style="margin-bottom: .625rem;">
                                <div class="flex-a-c">
                                    <div class="name">{{ item.has_one_member && item.has_one_member.nickname }}
                                    </div>
                                    <div class="change" @click.stop="link('finger_shopping_staff', 'edit', item)">更换
                                    </div>
                                </div>
                                <div class="count">{{ item.store_count }}</div>
                            </div>
                            <div class="flex-j-sb flex-a-c lh-1">
                                <div class="c-999 f-12">{{ item.created_at }}</div>
                                <div class="c-999 f-12">招募商家数</div>
                            </div>
                        </div>
                        <div class="flex-a-c">
                            <i class="c-999 iconfont icon-icon_more11"></i>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="head" v-for="(item, index) in list" :key="index"
                    @click="link('finger_shopping_agency', item)">
                    <div class="flex">
                        <img :src="item.has_one_member && item.has_one_member.avatar_image" />
                        <div class="flex-column" style="text-align: left;margin-left: .5rem;">
                            <div class="name">{{ item.has_one_member && item.has_one_member.nickname }}</div>
                            <div class="adress">{{ item.area }}</div>
                            <div class="time">{{ item.created_at }}</div>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="flex-j-sa">
                        <div class="flex-column">
                            <div class="bold f-15">{{ item.merchant_count }}</div>
                            <div class="f-12 c-999">招商员数量<i class="iconfont icon-icon_more11"
                                    style="color:#999;font-size: .625rem;"></i></div>
                        </div>
                        <div class="flex-column" @click.stop="link('finger_shopping_agency', item, 1)">
                            <div class="bold f-15">{{ item.store_count }}</div>
                            <div class="f-12 c-999">招募商家数量<i class="iconfont icon-icon_more11"
                                    style="color:#999;font-size: .625rem;"></i></div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <template v-else-if="active1 == 1">
            <div style="position: relative;">
                <div class="change-box">
                    <div @click="category_show = !category_show" class="flex-a-c">
                        <span  style="max-width: 6.25rem;overflow: hidden;text-wrap: nowrap;text-overflow: ellipsis;display: inline-block;">{{category_name?category_name:'商家类别'}}</span>
                        <i class="iconfont icon-xia"></i>
                    </div>
                    <div @click="showDate = true">
                        <span>{{info_date.month?info_date.month:'选择月'}}</span>
                        <i class="iconfont icon-xia"></i>
                    </div>
                    <div @click="choose_month">
                        <span>{{info_date.week?info_date.week:'选择周'}}</span>
                        <i class="iconfont icon-xia"></i>
                    </div>
                    <div @click="showDate2 = true">
                        <span>{{info_date.date?info_date.date:'选择日'}}</span>
                        <i class="iconfont icon-xia"></i>
                    </div>
                </div>
                <div :class="{ 'auto': category_show }" class="select">
                    <div v-for="(item, index) in category_list" :key="index" @click="handle_category(item)"
                        :class="{ 'main-color': item.id == cate_id }">{{ item.name }}</div>
                </div>
            </div>
            <div class="flex-a-c chang-btn-box" @click="sort_handle">
                <div class="f-13">流水排序</div>
                <div class="flex-column">
                    <div class="count-agent-icon-up" :class="{ 'count-agent-icon-up-current': sort == 'up' }"></div>
                    <div class="count-agent-icon-down" :class="{ 'count-agent-icon-down-current': sort == 'down' }">
                    </div>
                </div>
                <div @click.stop="clear" class="f-13 main-color" style="margin-left: .8125rem;">清空</div>
            </div>
            <div class="list">
                <div class="merchant-item" v-for="item in list" :key="item.id"
                    @click="link('finger_shopping_business', item)" :class="{ 'active-class': item.active == 0 }">
                    <div class="flex-a-c">
                        <div class="img-div">
                            <img :src="item.change_thumb" />
                        </div>
                        <div style="flex:1;margin-left: .5rem;">
                            <div class="flex-j-sb flex-a-c lh-1">
                                <span class="merchant-item-name">{{ item.store_name }}</span>
                                <span class="create-time">{{ item.created_at }}</span>
                            </div>
                            <div class="address"><i class="iconfont icon-dizhi1"></i>{{ item.full_address }}</div>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="flex-a-c  flex-j-sb" style="margin-top: .6875rem;">
                        <div class="flex-a-c">
                            <span class="f-12">总计流水：</span>
                            <span class="f-14 bold">¥{{ item.total_amount }}</span>
                        </div>
                        <div class="flex-a-c">
                            <template v-if="item.has_one_merchant">
                                <div class="img-div">
                                    <img style="border-radius: 50%;margin-right: .25rem;width: 1.25rem;height: 1.25rem;"
                                        :src="item.has_one_merchant.has_one_member.avatar_image" />
                                </div>
                                <div class="f-12">{{ item.has_one_merchant.has_one_member.nickname }}
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <div v-else class="earnings-list">
            <div>
                <van-tabs v-model="status_active" line-width=".9375rem" line-height=".125rem" @click="status_handle">
                    <van-tab v-for="item in status_list" :key="item.title" :title="item.title"></van-tab>
                </van-tabs>
                <div class="earnings-list-box" v-if="group_list && group_list.length !== 0">
                    <div v-for="(item, index) in group_list" class="earnings-list-status-item"
                        @click="handle_month(item, index)">
                        <div class="flex-j-sb" style="margin-bottom: 1rem;">
                            <div style="font-weight: 500;font-size: .875rem;color: #00001C;">{{ item.time }}</div>
                            <div style="font-size: .875rem;color: #F15353;font-weight: 400;">¥{{ item.amount }}<i
                                    :class="index !== current_index ? 'iconfont icon-icon_down1' : 'iconfont icon-icon_up1'"></i>
                            </div>
                        </div>
                        <div class="line" style="margin:0;"></div>
                        <div v-if="index == current_index" class="earnings-details">
                            <div class="area-more" v-if="month_data && month_data.length !== 0">
                                <template v-for="(c_item, c_index) in month_data">
                                    <div class="flex-j-sb lh-1" style="margin-bottom:.625rem;margin-top: .625rem;">
                                        <div style="font-weight: 500;font-size: .8125rem;color: #00001C;">
                                            {{ c_item.order_sn }}
                                        </div>
                                        <div style="font-size: .8125rem;color: #00001C;font-weight: 400;">¥{{
                                            c_item.dividend_amount }}
                                        </div>
                                    </div>
                                    <div class="flex-j-sb lh-1">
                                        <div style="font-weight: 500;font-size: .75rem;color: #6E6E79;">
                                            时间：{{ c_item.created_at }}
                                        </div>
                                        <div style="font-size: .75rem;color: #6E6E79;font-weight: 400;">
                                            {{ c_item.status_name }}</div>
                                    </div>
                                    <div class="earnings-details-line" v-if="c_index + 1 !== month_data.length"></div>
                                </template>
                            </div>
                            <div v-else>未查询到流水记录</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <van-popup round v-model="showDate" position="bottom">
            <van-datetime-picker v-model="currentDate" @cancel="showDate = false" @confirm="confirm" title="选择年月"
                :min-date="minDate" :max-date="maxDate" type="year-month" />
        </van-popup>
        <van-popup round v-model="showDate1" position="bottom">
            <div class="picker-popup">
                <van-picker title="选择周" ref="pickerRoot" show-toolbar :columns="columns" @confirm="onConfirm"
                    @cancel="showDate1 = false" @change="onChange" />
            </div>
        </van-popup>
        <van-popup round v-model="showDate2" position="bottom">
            <van-datetime-picker v-model="currentDate1" type="date" title="选择年月日" @confirm="confirm_date"
                :min-date="minDate" :max-date="maxDate" />
        </van-popup>
    </div>
</template>

<script>
export default {
    props: {
        left_employee_count: {
            default: "",
            type: String
        },
        agent_id: {
            default: "",
            type: String

        },
        active: {
            default: '',
            type: String
        },
        list: {
            default: () => ([]),
            type: Array
        }
    },
    data() {
        return {
            
            group_list: [],
            month_data: [],
            category_show: false,
            status_active: 0,
            sort: '',
            weeks: [],
            showDate1: false,
            showDate: false,
            showDate2: false,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(new Date().getFullYear(), 11, 1),
            currentDate: new Date(),
            active1: 0,
            status_list: [
                { title: '全部' },
                { title: '已结算' },
                { title: '未结算' },
                { title: '已失效' }
            ],
            columns: [],
            currentDate1: new Date(),
            current_index: null,
            current_start: '',
            current_end: '',
            category_list: [],
            cate_id: "",
            isLoadMore: true,
            page: 1,
            last_page: 1,
            current_month_item: "",
            category_name:"",
            info_date:{
                month:"",
                weeks:'',
                date:""
            }
        };
    },
    mounted() {
        this.setInit();
        this.get_category();

    },


    methods: {
        handle_category(data) {
            console.log(data,'data===');
            this.category_name = data.name;
            if (data.id == this.cate_id) {
                this.cate_id = '';
            } else {
                this.cate_id = data.id;
            }
            let json = { index: this.active1 };
            if (this.cate_id) {
                json.cate_id = this.cate_id;
            }
            if (this.sort == 'up') {
                json.sort = 'asc'
            }
            if (this.sort == 'down') {
                json.sort = 'desc'
            }
            if (this.current_start) {
                json.start = this.current_start;
            }
            if (this.current_end) {
                json.end = this.current_end;
            }
            this.category_show = false;
            this.$emit('get_list', json)
        },
        get_category() {
            $http.post('plugin.zhixianggou.api.agent.store-category').then(res => {
                if (res.result) {
                    this.category_list = res.data;
                }
            });
        },
        handle_month(data, index) {
            if (this.current_index == index) {
                this.current_index = null;
                return;
            }
            this.current_index = index;
            this.current_month_item = data.time;
            console.log(this.agent_id, 'this.agent_id====');
            this.get_month()

        },
        get_month(page = 1) {
            let json = { agent_id: this.agent_id, page, month: this.current_month_item };
            if (this.status_active == 1) {
                json.status = 1
            } else if (this.status_active == 2) {
                json.status = 0
            } else if (this.status_active == 3) {
                json.status = -1;
            }
            $http.post('plugin.zhixianggou.api.agent.reward-list', json, '.').then(res => {
                this.isLoadMore = true;
                if (res.result) {
                    this.month_data = page == 1 ? res.data.data : this.month_data.concat(res.data.data);
                    this.page = res.data.current_page;
                    this.last_page = res.data.last_page;
                    this.$nextTick(() => {
                        this.observeAreaRoot();
                    })
                } else {
                    this.$toast(res.msg);
                }
            })
        },
        status_handle() {
            let json = { agent_id: this.agent_id }
            this.month_data = [];
            this.group_list = [];
            this.current_index = null;
            if (this.status_active == 1) {
                json.status = 1;
            } else if (this.status_active == 2) {
                json.status = 0;
            } else if (this.status_active == 3) {
                json.status = -1;
            } else {
                json.status = '';
            }
            this.get_group(json)
        },
        tabs_handle() {
            this.list = [];
            this.month_data = [];
            this.group_list = [];
            this.current_index = null;
            this.category_show = false;
            if (this.active1 == 2) {
                this.status_active = 0;
                this.get_group({ agent_id: this.agent_id })
            } else {
                this.$emit('get_list', { index: this.active1 })
            }
        },
        get_group(json) {
            $http.post("plugin.zhixianggou.api.agent.reward-group", json, '.').then(res => {
                if (res.result) {
                    this.group_list = res.data;
                } else {
                    this.$toast(res.msg);
                }
            })
        },
        clear() {
            this.info_date.month = '';
            this.info_date.date = '';
            this.category_name = '';
            this.info_date.week = '';
            this.sort = '';
            this.cate_id = '';
            this.$emit('get_list', { index: this.active1 })
        },
        sort_handle() {
            this.sort == '' ? this.sort = 'up' : this.sort == 'up' ? this.sort = 'down' : this.sort == 'down' ? this.sort = 'up' : this.sort = '';
            let json = { index: this.active1 };
            if (this.sort == 'up') {
                json.sort = 'asc'
            }
            if (this.sort == 'down') {
                json.sort = 'desc'
            }
            if (this.current_start) {
                json.start = this.current_start;
            }
            if (this.current_end) {
                json.end = this.current_end;

            }
            if (this.cate_id) {
                json.cate_id = this.cate_id;
            }
            this.showDate2 = false;
            this.$emit('get_list', json)
        },
        link(url, params, obj) {
            if (url == 'finger_shopping_staff') {
                let json = {}
                if (params == 'add') {
                    json.left_employee_count = this.left_employee_count
                    json.agent_id = this.agent_id
                } else {
                    json.left_employee_count = 0;
                    json.agent_id = this.agent_id;
                    json.merchant_id = obj.id;
                    json.member_id = obj.member_id;
                }
                this.$router.push(this.fun.getUrl(url, json));
            } else if (url == 'finger_shopping_business') {
                if (params.active == 0) return;
                localStorage.setItem('agent_store_data', JSON.stringify(params))
                this.$router.push(this.fun.getUrl(url, { store_id: params.id }));
            } else if (url == 'finger_shopping_merchants_details') {
                localStorage.setItem('merchants_details_data', JSON.stringify(params))
                this.$router.push(this.fun.getUrl(url, { id: params.id }));

            } else if (url == 'finger_shopping_agency') {
                localStorage.setItem('finger_shopping_agency_data', JSON.stringify(params))
                if (obj == 1) {
                    this.$router.push(this.fun.getUrl(url, { id: params.id, tab: 1 }));

                } else {
                    this.$router.push(this.fun.getUrl(url, { id: params.id }));

                }
            }
        },
        // 新增方法：计算从2015年到当前年份的年头并返回数组
        getYearsFrom2015() {
            const currentYear = new Date().getFullYear();
            const startYear = 2015;
            const years = [];
            for (let year = startYear; year <= currentYear; year++) {
                years.push(year);
            }
            return years;
        },

        onChange(picker, value, index) {
            console.log(picker, value, index, 'picker, value, index===');
            if (value[0] == this.last_year) {
                console.log('劲来====');
                return;
            }
            picker.setColumnValue(1, 0);
        },
        choose_month() {
            this.showDate1 = true;
            this.$nextTick(() => {
                this.$refs['pickerRoot'].setIndexes([this.columns.length, 0, 0])
            })
        },
        onConfirm(value, index) {
            console.log(value, 'index===', index);
            let obj = this.columns[index[0]].children[index[1]].children[index[2]]

            let start = this.zero_fill(obj.start);
            let end = this.zero_fill(obj.end);
            if (index[1] == 0 && index[2] == 0) {//第一个月第一周
                let _start = start.split('-')[1] * 1;
                let _end = end.split('-')[1] * 1;
                if (_start > _end) {
                    start = start.split('-')[0] - 1 + '-' + start.split('-')[1] + '-' + start.split('-')[2];
                }
            }
            if (index[1] == 11 && index[2] == 4) {//最后一个月最后一周
                let _end = end.split('-')[1] * 1;
                if (_end == 1) {
                    end = (end.split('-')[0] * 1) + 1 + '-' + end.split('-')[1] + '-' + end.split('-')[2];
                }
            }
            console.log(start, end, 'year, month===');

            let json = { index: this.active1 };
            if (this.sort == 'up') {
                json.sort = 'asc'
            }
            if (this.sort == 'down') {
                json.sort = 'desc'
            }
            if (this.cate_id) {
                json.cate_id = this.cate_id;
            }
            json.start = start;
            json.end = end;
            this.current_start = start;
            this.current_end = end;
            this.showDate1 = false;
            this.info_date.month = '';
            this.info_date.date = '';
            this.info_date.week = `${value[2]}`;
            this.$emit('get_list', json)
        },
        current_month(index) {
            if (index < 10) {
                return '0' + (index + 1)
            }
            return index + 1;
        },
        zero_fill(str) {
            let arr = str.split('-');
            arr[1] < 10 ? arr[1] = '0' + arr[1] : arr[1] = arr[1]
            arr[2] < 10 ? arr[2] = '0' + arr[2] : arr[2] = arr[2];
            return arr.join('-');
        },

        setInit() {
            this.info_date.month = '';
            this.info_date.date = '';
            this.info_date.week = '';
            this.getYearsFrom2015().forEach((item, index) => {
                let obj = this.groupWeeksByMonth(item * 1)
                this.columns.push({
                    text: item,
                    children: this.format_month(obj)
                })
            })
        },
        format_month(obj) {
            let arr = []
            for (const key in obj) {
                arr.push({
                    text: (key * 1 + 1) + '月',
                    children: this.format_weeks(obj[key].weeks)
                })
            }
            return arr;

        },
        format_weeks(arr) {
            let _arr = [];
            arr.forEach((item, index) => {
                let start = item.start.replace(/^\d{4}\//, '');
                let end = item.end.replace(/^\d{4}\//, '');
                _arr.push({
                    start: item.start.replace(/\//g, '-'),
                    end: item.end.replace(/\//g, '-'),
                    text: `${item._week}(${start.replace('/', '.')}-${end.replace('/', '.')})`
                })
            })
            return _arr;
        },

        groupWeeksByMonth(year) {
            const weeks = this.getWeeksInYear(year);
            const monthGroups = {};

            // 获取每个月的第一天和最后一天
            for (let month = 0; month < 12; month++) {
                const firstDay = new Date(year, month, 1);
                const lastDay = new Date(year, month + 1, 0);
                monthGroups[month] = { firstDay, lastDay, weeks: [] };
            }

            // 将每周分配到对应的月份
            weeks.forEach((week, index) => {
                const weekStart = new Date(week.start);
                const weekEnd = new Date(week.end);

                for (let month = 0; month < 12; month++) {
                    const monthGroup = monthGroups[month];
                    if (weekStart <= monthGroup.lastDay && weekEnd >= monthGroup.firstDay || index == 0 || (index == weeks.length - 1 && month == 11)) {
                        monthGroup.weeks.push(week);
                        break;
                    }
                }
            });

            return monthGroups;
        },
        getWeeksInYear(year) {
            const weeks = [];
            let count = 0;
            let currentDate = new Date(year, 0, 1); // 从该年的1月1日开始

            // 判断1月1日是周几
            const firstDayOfYear = currentDate.getDay();
            // 如果1月1日是周五、周六或周日，则第一周属于上一年的最后一周
            if (firstDayOfYear >= 5) {
                currentDate.setDate(currentDate.getDate() + (7 - firstDayOfYear));
            } else {
                // 如果1月1日是周一、周二、周三或周四，则第一周为新年第一周
                currentDate.setDate(currentDate.getDate() - firstDayOfYear + 1);
            }

            // 循环计算每周的起始和结束日期
            while (currentDate.getFullYear() === year || weeks.length === 0) {
                count++;
                const startDate = new Date(currentDate);
                const endDate = new Date(currentDate);
                endDate.setDate(endDate.getDate() + 6);
                weeks.push({
                    _week: `第${count}周`,
                    start: `${year}/${startDate.getMonth() + 1}/${startDate.getDate()}`,
                    end: `${year}/${endDate.getMonth() + 1}/${endDate.getDate()}`
                });
                currentDate.setDate(currentDate.getDate() + 7);
            }
            return weeks;
        },
        confirm(value) {
            let json = { index: this.active1 };
            if (this.sort == 'up') {
                json.sort = 'asc'
            }
            if (this.sort == 'down') {
                json.sort = 'desc'
            }
            if (this.cate_id) {
                json.cate_id = this.cate_id;
            }
            const now = new Date(value);
            const year = now.getFullYear();
            const month = now.getMonth() + 1 < 10 ? ('0' + (now.getMonth() + 1)) : now.getMonth() + 1;
            const lastDay = new Date(year, month, 0).getDate();
            json.start = `${year}-${month}-01`;
            json.end = `${year}-${month}-${lastDay}`
            this.current_start = `${year}-${month}-01`;
            this.current_end = `${year}-${month}-${lastDay}`;
            this.showDate = false;
            this.info_date.week ='';
            this.info_date.date='';
            this.info_date.month = `${year}-${month}`;
            this.$emit('get_list', json)
        },
        confirm_date(value) {
            let json = { index: this.active1 };
            if (this.sort == 'up') {
                json.sort = 'asc'
            }
            if (this.sort == 'down') {
                json.sort = 'desc'
            }
            if (this.cate_id) {
                json.cate_id = this.cate_id;
            }
            const now = new Date(value);
            const year = now.getFullYear();
            const month = now.getMonth() + 1 < 10 ? ('0' + (now.getMonth() + 1)) : now.getMonth() + 1;
            const day = now.getDate() < 10 ? ('0' + now.getDate()) : now.getDate();
            json.start = `${year}-${month}-${day}`;
            json.end = `${year}-${month}-${day}`
            this.current_start = `${year}-${month}-${day}`;
            this.current_end = `${year}-${month}-${day}`
            this.showDate2 = false;
            this.info_date.month = '';
            this.info_date.week ='';
            this.info_date.date = `${year}-${month}-${day}`;
            this.$emit('get_list', json)
        },
        observeAreaRoot() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.addEventListener('scroll', this.handleScroll);
                    } else {
                        entry.target.removeEventListener('scroll', this.handleScroll);
                    }
                });
            });
            observer.observe(document.getElementsByClassName('area-more')[0]);
        },
        handleScroll(event) {
            const scrollTop = event.target.scrollTop;
            const clientHeight = event.target.clientHeight;
            const scrollHeight = event.target.scrollHeight;
            if (scrollTop + clientHeight >= scrollHeight - 10 && this.isLoadMore) { // 10 is a threshold value
                this.isLoadMore = false;
                if (this.page >= this.last_page) {
                    return;
                }
                let page = this.page + 1
                this.get_month(page);
            }
        },
    },
    watch: {
        "active": function (val) {
            this.active1 = 0
        },
    }
};
</script>

<style scoped lang='scss'>
.active-class {
    img {
        display: block;
    }

    .img-div {
        position: relative;

        &::after {
            position: absolute;
            content: '';
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #fff;
            opacity: .6;
            border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
            z-index: 10;
        }
    }

    .merchant-item-btn {
        border: 1px solid #D6D6DC !important;
    }

    div {
        color: #999999 !important;
    }

    span {
        color: #999999 !important;
    }
}

.picker-popup ::v-deep .van-picker__columns>.van-picker-column:nth-child(3) {
    flex: 2 !important;
}

.area-more {
    max-height: 18.75rem;
    overflow-y: scroll;
}

.county-agent-wrapper .select {
    height: 0;
    overflow: hidden;
    position: absolute;
    left: 1.3125rem;
    min-width: 5.6875rem;
    padding: 0 .75rem;
    text-align: center;
    border-radius: .5rem;
    background-color: #fff;
    z-index: 10;
    box-shadow: 0 .25rem .375rem rgba(0, 0, 0, .3);

    div {
        margin: .625rem 0;
        border-bottom: 1px solid #ccc;
        padding-bottom: .625rem;
    }

    div:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

.auto {
    height: auto !important;
    transition: height 1s ease;
}

.head {
    margin: .625rem .75rem;
    border-radius: .5rem;
    overflow: hidden;
    background-color: #fff;
    padding: .75rem;
    cursor: pointer;

    .adress {
        font-weight: 400;
        font-size: .75rem;
        color: #999999;
    }


    .time {
        font-weight: 400;
        font-size: .75rem;
        color: #999999;
        line-height: 1;
        margin-top: .4375rem;
    }

    .name {
        font-weight: bold;
        font-size: .9375rem;
        line-height: 1;
        color: #00001C;
        margin-top: .3125rem;
        margin-bottom: .375rem;
    }


    img {
        width: 3rem;
        height: 3rem;
        border-radius: .625rem;
        margin: 0;
    }

    .line {
        margin: .8125rem 0 .75rem;
        height: 1px;
        background-color: #F0F0F1;
    }

}

.county-agent-wrapper {
    padding-bottom: 7.0313rem;

    .count-agent-icon-up-current {
        border-bottom: 5px solid var(--themeBaseColor) !important;
    }

    .count-agent-icon-down-current {
        border-top: 5px solid var(--themeBaseColor) !important;
    }

    .count-agent-icon-up {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #999;
        /* 三角形的颜色 */
        margin-bottom: .125rem;
        margin-left: .1563rem;
    }

    .count-agent-icon-down {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #999;
        margin-left: .1563rem;
    }
}

.employee-box {
    margin: .625rem .75rem;
    background-color: #fff;
    border-radius: .5rem;
    cursor: pointer;
    padding: .5rem;

    .icon-tianjiayuangong1 {
        color: var(--themeBaseColor);
    }

    .tianjia-icon {
        position: relative;
        padding: .4375rem;
        margin-right: .4375rem;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: var(--themeBaseColor);
            border-radius: .4688rem;
            opacity: 0.2;
        }
    }
}

.c-999 {
    color: #999999;
}

.account-manager {
    padding: .75rem;
    margin: .625rem .75rem;
    border-radius: .5rem;
    display: flex;
    background-color: #fff;
    align-items: center;
    cursor: pointer;

    .account-manager-right {
        display: flex;
        align-items: center;
        margin-left: .5rem;

    }

    .count {
        color: #00001C;
        font-weight: bold;
        font-size: .9375rem;
        line-height: 1;
        padding-right: 1.0313rem;
    }

    .change {
        width: 1.9375rem;
        height: 1rem;
        margin-left: .25rem;
        border-radius: .25rem;
        border: 1px solid var(--themeBaseColor);
        color: var(--themeBaseColor);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        box-sizing: border-box;
    }

    .name {
        font-weight: bold;
        font-size: .9375rem;
        color: #00001C;
    }

    &-right {
        flex: 1;
    }

    img {
        margin: 0;
        width: 3rem;
        height: 3rem;
        border-radius: .625rem;
    }

}

.second-tabs ::v-deep .van-tabs__nav {
    background-color: transparent;
}

.second-tabs ::v-deep .van-tabs__line {
    bottom: 24px;
}

.earnings-list ::v-deep .van-tabs__nav {
    background-color: #fff !important;
}

.bold {
    font-weight: bold;
}

.earnings-list ::v-deep .van-tabs {
    border-radius: .5rem;
    overflow: hidden;
}

.main-color {
    color: var(--themeBaseColor);
}

.chang-btn-box {
    margin: .625rem .75rem .75rem;
    justify-content: flex-end;

    div {
        cursor: pointer;
    }

    .icon-xia {
        display: flex;
    }
}

.change-box {
    cursor: pointer;
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: .8438rem 0;
    justify-content: space-evenly;
    margin: .625rem .75rem;
    border-radius: .5rem;

    .icon-xia {
        color: #AAAAB3;
    }
}

.earnings-list ::v-deep .van-tabs {
    border-radius: .5rem;
    overflow: hidden;
}

.lh-1 {
    line-height: 1;
}

.earnings-list {
    margin-top: .5313rem;
    padding: 0 .75rem 7.0313rem;

    .earnings-list-status-item {
        cursor: pointer;
        padding: 1.125rem .9375rem 0;

    }



    .earnings-list-box {
        margin-top: .625rem;
        background-color: #fff;
        border-radius: .5rem;

    }

    .earnings-details {
        background-color: #FAFAFA;
        padding: .9375rem 1.125rem .9688rem .7188rem;
    }

    .earnings-details-line {
        margin: .6563rem 0;
        height: 1px;
        background-color: #F0F0F1;
    }



    .earnings-list-box {
        margin-top: .625rem;
        background-color: #fff;
        border-radius: .5rem;
        padding-bottom: 1.125rem;

    }

    .earnings-list-status-item {
        padding: 1.125rem .9375rem 0;

    }

    .icon-icon_down1,
    .icon-icon_up1 {
        color: #AAAAB3;
        margin-left: .6875rem;
    }

}



.list {
    padding: 0 .75rem;



    .line {
        height: 1px;
        background: #F0F0F1;
        margin: .75rem .1563rem 1.0625rem;

    }

    .merchant-item {
        padding: .75rem .75rem .9375rem;
        border-radius: .5rem;
        background-color: #fff;
        margin-bottom: .625rem;
        cursor: pointer;

        .merchant-item-name {
            font-weight: bold;
            font-size: .9375rem;
            color: #00001C;


        }

        .create-time {
            font-weight: 400;
            font-size: .75rem;
            color: #999999;
            line-height: 1;
        }

        .icon-dizhi1 {
            font-size: .625rem;
            margin-right: .1563rem;
        }

        .address {
            font-weight: normal;
            font-size: .75rem;
            color: #999999;
            margin-top: .6875rem;
            text-align: left;
        }

        img {
            width: 3rem;
            height: 3rem;
            border-radius: .625rem .625rem .625rem .625rem;
            margin: 0;
        }
    }

}
</style>